<template>
    <n-form ref="formRef" :model="model" :rules="rules" size="large" :show-label="false">
        <n-form-item path="username">
            <n-input
                v-model:value="model.username"
                :placeholder="$t('page.login.common.userNamePlaceholder')"
            >
                <template #prefix>
                    <jb-icon
                        icon="fa-solid:user"
                        class="text-18px mr-8px"
                        :inline="true"
                    ></jb-icon>
                </template>
            </n-input>
        </n-form-item>
        <n-form-item path="password">
            <n-input
                v-model:value="model.password"
                type="password"
                show-password-on="click"
                :placeholder="$t('page.login.common.passwordPlaceholder')"
                @keydown.enter="handleSubmit"
            >
                <template #prefix>
                    <jb-icon
                        icon="solar:lock-password-bold"
                        class="text-18px mr-8px"
                        :inline="true"
                    ></jb-icon>
                </template>
            </n-input>
        </n-form-item>
        <n-form-item v-if="useCaptcha" path="captcha">
            <n-input
                v-model:value="model.captcha"
                :placeholder="$t('page.login.codeLogin.imageCodePlaceholder')"
                @keydown.enter="handleSubmit"
            >
                <template #prefix>
                    <jb-icon
                        icon="solar:gallery-check-bold"
                        class="text-18px mr-8px"
                        :inline="true"
                    ></jb-icon>
                </template>
            </n-input>
            <div class="pl-8px">
                <image-verify v-model:value="model.jbcapkey" />
            </div>
        </n-form-item>
        <n-space :vertical="true" :size="24">
            <!--保持登录选项 -->
            <!--            <div class="flex-y-center justify-between">-->
            <!--                <n-checkbox v-model:checked="keepOn">{{-->
            <!--                    $t('page.login.pwdLogin.rememberMe')-->
            <!--                }}</n-checkbox>-->
            <!--                &lt;!&ndash;                <n-button :text="true" @click="toLoginModule('reset-pwd')">&ndash;&gt;-->
            <!--                &lt;!&ndash;                    {{ $t('page.login.pwdLogin.forgetPassword') }}&ndash;&gt;-->
            <!--                &lt;!&ndash;                </n-button>&ndash;&gt;-->
            <!--            </div>-->
            <n-button
                type="primary"
                size="large"
                :block="true"
                :round="true"
                :loading="auth.loginLoading"
                @click="handleSubmit"
            >
                {{ $t('page.login.common.confirm') }}
            </n-button>
        </n-space>
    </n-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { useAuthStore } from '@/store'
import { JBoltApi, randomCode, Rules } from '@/utils'
import { $t } from '@/locales'
import { md5 } from '@/utils/crypto'

const auth = useAuthStore()
const { loginByCaptcha } = useAuthStore()

const formRef = ref<HTMLElement & FormInst>()

const useCaptcha = ref<boolean>(false)

const rules: FormRules = {
    username: new Rules().required('请输入用户名').value,
    password: new Rules().required('请输入密码').value
}

JBoltApi.get('/api/captcha/checkUse').then(({ result }) => {
    useCaptcha.value = result.data
    if (result.data) {
        rules.captcha = new Rules()
            .required('请输入验证码')
            .length(4, '请输入4位字符').value
    }
})

const model = reactive({
    username: '',
    password: '',
    captcha: '',
    jbcapkey: ''
})

// const keepOn = ref(false)

async function handleSubmit() {
    await formRef.value?.validate()
    model.password = randomCode(2) + md5(model.password) + randomCode(3)
    const { username, password, captcha, jbcapkey } = model

    loginByCaptcha(username, password, captcha, jbcapkey).catch(() => {
        model.password = ''
        model.captcha = ''
        model.jbcapkey = ''
    })
}
</script>

<style scoped></style>
